#creating helper functions in handlebars | Explore Tumblr posts and blogs

tak4hir0 · 6 years ago

Link

Today we want to publish a resource that can generate an instant boost in your workflow, here we have a list of the Best JavaScript template engines to choose from, and each of them could make your development faster and easier. When you build a JavaScript application, you'll almost certainly use some JavaScript templates. Rather than use a library like jQuery (or vanilla JavaScript) to update your HTML when values update, you can use templates, which cleans up your code hugely. In this article, we'll look at some popular templating libraries. You’d probably be pumped to read about them. Lucky for you, that’s exactly what we are going to share with you in this post. If you wish to capitalize on the sentiments of the market by using the best JavaScript template engines platform, in that case, youare in the right place. Mustache is often considered the base for JavaScript templating. Another popular solution, Handlebars, actually builds on top of Mustache, but that doesn't mean that it isn't a very good templating solution. Mustache.render("Hello, ", { name: "Jack" }); // returns: Hello, Jack Once Mustache is included on your page, you have access to the global 'Mustache' object. The main method you'll use is 'render' , which takes two arguments. The first is the actual template, and the second is any arguments that need to be passed to it. In the above example, you can see that is referenced '' . Two braces around the variable is the Mustache syntax to show that it's a placeholder. When Mustache compiles it, it will look for the 'name' property in the object we pass in, and replace '' with the value, which is "Jack", in this case. Here we have passed in the template as a string, but if you had a more complex template, you might not like to do it this way. Instead, a common solution is to place a template inside 'script' tags: We can then access the contents of that script tag. For example, with jQuery it's as easy as: By giving the 'script' tag a 'type' attribute of something the browser doesn't understand, it will ignore the contents, so it doesn't try to execute it as JavaScript. You can also use loops in your templates. Taking this template: With this data passed in: { people: [ { name: "Jack" }, { name: "Fred" } ] } You'll get the string "JackFred" returned. Mustache is capable of a lot more than covered here, so do check the Github for more. View on Github Underscore Templates Underscore is a utlity belt library for JavaScript, providing all sorts of useful methods. It also provides simple templates we can use. It uses a slightly differet syntax to Mustache. Here's a simple example: ", { name: "Jack" }); // returns: Hello, Jack If you've ever used Embedded Ruby (or ERB for short), you may be more familiar with this syntax. The ' denotes that whatever the value of `name` should be outputted in place of ' . Underscore can also do things like loops and conditionals, but it does it slightly differently to how Mustache does. " _.template(template, { people: ["Jack", "Fred"] } ); In Underscore templates, you can embed arbitary JavaScript within ' tags. Note that we use ' to output to the page, and ` to contain JavaScript. This means any form of loop or conditional you can do in JS, you can use in Underscore. View and Download Art-template Art-template is a simple and superfast templating engine that use simple templating syntax, simultaneously supports two syntax of template. Standard syntax allows templates to be easier to read and write. While original syntax has powerful logical processing ability, compatible with EJS template. Also it optimizes template rendering speed by scope pre-declared technique. standard syntax: original syntax: It achieves runtime performance which is close to the limits of JavaScript. At the same time, it supports both NodeJS and browser. View on Github DOT Created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Nodejs. Basic usage: It shows great performance for both Nodejs and browsers. doT.js is fast, small and has no dependencies. View on Github JavaScript-Templates JavaScript-Templates It's a 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like Node.js, module loaders like RequireJS, Browserify or webpack and all web browsers. Example: Add a script section with type "text/x-tmpl" , a unique id property and your template definition as content: In your application code, create a JavaScript object to use as data for the template: var data = { title: 'JavaScript Templates', license: { name: 'MIT license', url: 'https://opensource.org/licenses/MIT' }, features: ['lightweight & fast', 'powerful', 'zero dependencies'] } JavaScript-Templates it's compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers. View on Github EJS EJS is a simple templating language that lets you generate HTML markup with plain JavaScript,is inspired by ERB templates and acts much the same. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript, it uses the same tags as ERB (and indeed, Underscore) and has many of the same features. It also implements some Ruby on Rails inspired helper. EJS is different in that it expects your templates to be in individual files, and you then pass the filename into EJS. It loads the file in, and then gives you back HTML. // in JS file new EJS({ url: "template.ejs" }).render({ name: "Jack" }); // returns: Hello, Jack Note that you can load in text templates, too: " }).render({ name: "Jack" }); Here's how we would loop over some people, and link to their profile pages on our website: That's very similar to how Underscore might do it, but note the use of `link_to`. That's a helper that EJS defines to make linking a little bit easier. It implements a lot of others too, which are documented here. To find out more about EJS, I suggest the EJS home page. View on EJS Homepage Template.js A JavaScript template engine, simple, easy & extras, support webpack, and fis. Provides a set of template syntax, the user can write a template block. Writing a template: Use a script tag of type="text/html" to store the template, or put it in a string: Rendering template: var tpl = document.getElementById('tpl').innerHTML; template(tpl, { list: [ {name: "yan"}, {name: "haijing"} ] } ); Output results: Each time incoming data, generate HTML fragments generated by the corresponding data, rendering different effects. View on Github HandlebarsJS Handlebars is one of the most popular templating engines and builds on top of Mustache. It provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Anything that was valid in a Mustache template is valid in a Handlebars template. Handlebars add lots of helpers to Mustache. One of these is 'with' , which is great for working with deep objects: Notice that the Handlebars compiler works slightly differenly. Firstly, you pass the template into 'Handlebars.compile', which then returns a function. You can call that, passing in the object containing the data, and then you get the HTML back. The '' helper takes an object and then within it allows you to refer to properties within that object. This means rather than doing: {{ author.firstName}} We can do: Which can save on typing, especially if you're doing it a lot. Handlebars also provides an each helper: var source = ""; var template = Handlebars.compile(source); var html = template({ people: [{ name: "Jack" }, { name: "Fred" }] }); // returns: "JackFred" Handlebars it's also very easy to extend with your own methods View on Github Tempo Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data templates in pure HTML. It Clears separation of concerns: no HTML in your JavaScript files, and no JavaScript in your HTML Include the Tempo script: Compose the data template inline in HTML: It Makes working with AJAX/JSON content a piece of cake, also It Works in Safari, Chrome, FireFox, Opera, and Internet Explorer 6+ View on Github Jade Templating With the popularity of NodeJS and the number of web apps being built in it now, there's a lot of templating libraries out there designed to be used on the server. Jade templates are very different to any we've looked at so far, in that it depends hugely on indents and whitespace. Here's a simple example: // template.jade p | Hello, = name // JS jade.renderFile("template.jade", { name: "Jack" }, function(err, result) { console.log(result); // logs: Hello, Jack }); It's a bit difficult to understand at first, we indent the two lines below the 'p' to denote that they exist within it. The '|' is used to tell Jade that what's on that line is just plain text to output, and the '=' tells Jade to look for a variable named 'name'. We can also do loops in Jade too: each person in people li = person Called with an array of names: '{ people: [ "Jack", "Fred" ]}' , this will output: Jade is capable of a lot more - unlike the other template engines we've looked at, the idea with Jade is that you write the entire of your HTML in it. It can do things like output script tags: script(type="text/javascript", src="myfile.js") A good place to start is the Jade examples. You can download them and run them with Node to see the output and how Jade works. View on Jade Website ECT ECT is a performance focused JavaScript template engine with embedded CoffeeScript syntax. His best features are: Excellent performance Templates caching Automatic reloading of changed templates CoffeeScript code in templates Multi-line expressions support Tag customization support Node.JS and client-side support Powerful but simple syntax Inheritance, partials, blocks For example to generate a list, we need first these params: { title : 'Hello, world!', id : 'main', links: [ { name : 'Google', url : 'https://google.com/' }, { name : 'Facebook', url : 'https://facebook.com/' }, { name : 'Twitter', url : 'https://twitter.com/' } ], upperHelper : function (string) { return string.toUpperCase(); } } Then the list template: That will generate this result: View on Github Dot Dom .dom is a tiny (512 byte) template engine that uses virtual DOM and some of react principles, .dom borrows some concepts from React.js (such as the re-usable Components and the Virtual DOM) and tries to replicate them with the smallest possible footprint, exploiting the ES6 javascript features. With such library you can create powerful GUIs in tight space environments, such as IoT devices, where saving even an extra byte actually matters! Example with Stateless Component: function Hello(props) { return H('div', `Hello ${props.toWhat}`); } R( H(Hello, {toWhat: 'World'}), document.body ) The library never exceeds the 512 bytes in size. It is heavily exploiting the ES6 specifications. View on Github Template7 Template7 is a mobile-first JavaScript template engine with Handlebars-like syntax. It is used as a default template engine in Framework7. Template7 templates looks like Handlebars templates, it is like regular HTML but with embedded handlebars expressions: First of all we need to deliver string template. For example, we can store in script tag: Now we need to compile it in JavaScript. Template7 will convert our template string to plain JavaScript function: var template = $$('#template').html(); // compile it with Template7 var compiledTemplate = Template7.compile(template); // Now we may render our compiled template by passing required context var context = { firstName: 'John', lastName: 'Doe' }; var html = compiledTemplate(context); Now, html variable will contain: It is ultra-lightweight (around 1KB minified and gzipped) and blazing fast (up to 2-3 times faster than Handlebars in mobile Safari). View on Github Bunny BunnyJS is a modern Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling and much more the package of small stand-alone components without dependencies. It has No dependencies – can be used in any project anywhere anytime View on Github Squirrelly Squirrelly is a modern, configurable, and fast template engine implemented in JavaScript. With Squirrelly, you can write templates that are blazing fast and can be rendered in milliseconds, server-side or client-side. Squirrelly doesn't just limit you to HTML--you can use it with any language, and custom delimeters make it so there aren't parsing errors. It's also tiny (~2.5 KB gzipped), has 0 dependencies, and is blazing fast. Simple Template example: Conditionals: Display this Display this Loops: Display this The current array element is The current index is Squirrelly has a number of features that set it apart from the competition: It's faster than most templating engines It supports user-defined helpers and native helpers It supports filters It supports partials It supports custom tags (delimeters) It's incredibly lightweight: in comparison: the full version only weighs about 2.5 KB gzipped, compared to Pug's 237 KB and Handlebars' 21.5 KB It works with other languages than HTML It's not white-space sensitive It works out of the box with ExpressJS and the full version weighs only ~2.5KB gzipped. View on Github Conclusion It is upon the developer to decide which JavaScript template engine presents him/her with the best development capabilities and features that come with each ecosystem. Developers are tasked to choose among other criteria performance and visually oriented preferences.

#MA-NO Web Design and Development

0 notes

toddbirchard-architect · 7 years ago

Photo

Handlebars Templating in ExpressJS

Node for Noobs

Writing HTML sucks, thus we should do everything to minimize this aspect of development where possible. Enter Handlebars , a savior to those who hate repetitive code (and percentage signs). If you do any sort of development work, you're probably familiar with Handlebars. I thought I was, but it isn't until we need to start a new project from scratch that we realize that we totally forgot the configuration process we took last time. That's why I'm here. Let's have a quick refresher on the parts that make up Handlebars Layouts are the most ambiguous high-level layer; these are commonly used to set underlying page metadata as well as general layout (for lack of a better term). Pages are templates which equate to one type of page. For example, the 'post' page on this site is unique from, say, the homepage. Because all posts share elements with one another, hundreds of posts share this same template. Partials are snippets which can be shared between pages, such as navigation. A Context is content which is passed to templates and result in being the page's content Helpers are the closest we get to logic in Handlebars: these allow us to display or omit content based on conditionals such as if statements. For example: showing an author's avatar only if they have uploaded an image. Project Setup We're going to use the Express /views folder to contain all of our handlebars goodness. Our project should look something like this: myapp ├── bin ├── build ├── routes ├── src ├── views │ ├── layouts/ │ ├── partials/ │ └── error.hbs │ └── index.hbs │ └── login.hbs │ └── etc └── README.md └── app.js └── package.json It's important to distinguish that we've separated our views folder into three classifications for layouts , partials , and pages , where pages occupy the root /views directory. It's important to keep this distinction as our structure affects how we serve up these templates. Configure that Ish Install handlebars: npm install handlebars --save Crack open your app.js file or whatever it is you call that thing. Require handlebars: var hbs = require( 'express-handlebars'); Next we'll configure Express to use Handlebars as the view engine, and tell Express where to find these files: // view engine setup app.set('view engine', 'hbs'); app.engine( 'hbs', hbs( { extname: 'hbs', defaultView: 'default', layoutsDir: __dirname + '/views/pages/', partialsDir: __dirname + '/views/partials/' })); Express assumes by default that we're storing our views in the '/views' folder, which we are. We take this a step further by specifying which subfolders our partials and layouts are in above. We can save pages directly in /views . Notice that we're also setting a default layout. We can override this in our routes if needed, but setting a default layout is useful for loading pages in an html wrapper container page metadata. Kicks on Route 66 Let's create our first route in routes/index.js . We're going to load a view called home into a layout called default : var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('home', {layout: 'default', template: 'home-template'}); }); This will render views/home.hbs into views/layouts/default.hbs , provided are views are set up correctly. We also pass a custom value template which is user-defined; more on that below. Basic Usage Let's finally take a look at our actual Handlebars views. Here's default.hbs :

Best Website

We have three values here: and , and . is a value with double brackets, thus is expecting linear data. We passed template in our route: this sets the body class to equal home-template on the chance that we'll want to apply page-specific styles or logic in the future. is rocking the triple brackets, and is reserved specifically to serve this purpose: loading templates into other templates. Lastly we have . This will load a partial named footer from views/partials/footer.hbs , provided that we create it. The difference between how and are being loaded have to do with a general workflow philosophy; pages are the main event and thus are loaded into layouts by their command. Partials can be called by pages at will whenever we please. There's obviously a lot more to Handlebars- the fun doesn't truly begin until we pull dynamic values from databases or wherever. We'll get there.

- Todd Birchard Read post

#HackersAndSlackers #Hackers #Ghost #NodeJS #Frontend #ExpressJS

0 notes

hackersandslackers · 7 years ago

Photo

Handlebars Templating in ExpressJS

Node for Noobs

- Todd Birchard

#HackersAndSlackers #Hackers #Ghost #NodeJS #Frontend #ExpressJS

0 notes

t-baba · 8 years ago

Photo

Ember.js: The Perfect Framework for Web Applications

Ember.js is an opinionated frontend JavaScript framework that has been getting a lot of interest lately. This article will introduce some key concepts of the framework while building a simple application with it, in order to show a basic example of what it is capable of producing.

Our example application is going to be a Dice Roller, including the ability to roll some dice and view a history of all dice rolls that have been performed to date. A fully working version of this application is available from Github

The Ember.js framework pulls together a lot of modern JavaScript concepts and technologies into one single bundle, including but not limited to:

The use of the Babel transpiler tool, to support ES2016 throughout.

Testing support at the Unit, Integration and Acceptance levels as standard, powered by Testem and QTest.

Asset building using Broccoli.js.

Support for live reloading, for shorter development cycle times.

Templating using the Handlebars markup syntax.

URL Routing first development to ensure that deep linking is fully supported throughout.

Full data layer built around JSON API, but pluggable for whatever API access you need.

In order to work with Ember.js, it is assumed that you have an up-to-date installation of Node.js and npm. If not then these can be downloaded and installed from the Node.js website.

It should also be mentioned that Ember is purely a frontend framework. It has a number of ways of interacting with the backend of your choice, but this backend is not in any way handled by Ember itself.

Introducing ember-cli

A lot of the power of Ember.js comes from its command line interface (CLI). This tool - known as ember-cli - powers much of the development lifecycle of an Ember.js application, starting from creating the application, through adding functionality into it all the way to running the test suites and starting the actual project in development mode.

Almost everything that you do whilst developing an Ember.js application will involve this tool at some level, so it is important to understand how best to use it. We will be making use of it throughout this article.

The first thing we need to do is ensure that the Ember.js CLI is correctly installed and up-to-date. This is done by installing from npm, as follows:

$ npm install -g ember-cli

and we can check it was successfully installed by running the following command:

$ ember --version ember-cli: 2.15.0-beta.1 node: 8.2.1 os: darwin x64

Creating Your First Ember.js App

Once ember-cli is installed, you are ready to start creating your application. This is the first place we will be making use of the Ember.js CLI tool - it creates the entire application structure, setting everything up ready to run.

$ ember new dice-roller installing app create .editorconfig create .ember-cli create .eslintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/resolver.js create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create app/templates/components/.gitkeep create config/environment.js create config/targets.js create ember-cli-build.js create .gitignore create package.json create public/crossdomain.xml create public/robots.txt create testem.js create tests/.eslintrc.js create tests/helpers/destroy-app.js create tests/helpers/module-for-acceptance.js create tests/helpers/resolver.js create tests/helpers/start-app.js create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep NPM: Installed dependencies Successfully initialized git. $

This has caused an entire application to be created which is ready to run. It has even set up Git as source control to track your work.

Note: If you wish, you can disable the Git integration and you can prefer Yarn over npm. The help for the tool describes this and much more.

Now, let's see what it looks like. Starting the Ember application for development purposes is - once again - also done using ember-cli:

$ cd dice-roller $ ember serve Livereload server on http://localhost:49153 'instrument' is imported from external module 'ember-data/-debug' but never used Warning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-http://ift.tt/2yq7keZ' Warning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-http://ift.tt/2wZEQHr' Build successful (5835ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- Babel (16) | 4625ms (289 ms) Rollup (1) | 445ms

We are now ready to go. The application is running on http://localhost:4200, and looks like this:

It is also running a LiveReload service which automatically watches for changes to the filesystem. This means that you can have an incredibly fast turnaround time when tweaking your site design.

Let's try it?

The initial page already tells us what to do, so let's go and change the main page and see what happens. We're going to change the app/templates/application.hbs file to look like the following.

This is my new application.

Note: The tag is part of how Routing works in Ember. We will cover that later on.

The first thing to notice is the output from ember-cli, which should look as follows:

file changed templates/application.hbs Build successful (67ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- SourceMapConcat: Concat: App (1) | 9ms SourceMapConcat: Concat: Vendor /asset... (1) | 8ms SimpleConcatConcat: Concat: Vendor Sty... (1) | 4ms Funnel (7) | 4ms (0 ms)

This tells us that it has spotted that we changed the template and rebuilt and restarted everything. We've had zero involvement in that part of it.

Now let's look at the browser. If you've got LiveReload installed and running you will not even have needed to refresh the browser for this to be picked up, otherwise, you will need to reload the current page.

Not very exciting, but this is with almost no effort on our part that we've achieved this.

In addition, we get a fully set up test suite ready to run. This is - unsurprisingly - run using the Ember tool as well, as follows:

$ ember test ⠸ Building'instrument' is imported from external module 'ember-data/-debug' but never used ⠴ BuildingWarning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-http://ift.tt/2ypNuAD' ⠇ BuildingWarning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-http://ift.tt/2x0OGZZ' cleaning up... Built project successfully. Stored in "/Users/coxg/source/me/writing/repos/dice-roller/tmp/class-tests_dist-PUnMT5zL.tmp". ok 1 PhantomJS 2.1 - ESLint | app: app.js ok 2 PhantomJS 2.1 - ESLint | app: resolver.js ok 3 PhantomJS 2.1 - ESLint | app: router.js ok 4 PhantomJS 2.1 - ESLint | tests: helpers/destroy-app.js ok 5 PhantomJS 2.1 - ESLint | tests: helpers/module-for-acceptance.js ok 6 PhantomJS 2.1 - ESLint | tests: helpers/resolver.js ok 7 PhantomJS 2.1 - ESLint | tests: helpers/start-app.js ok 8 PhantomJS 2.1 - ESLint | tests: test-helper.js 1..8 # tests 8 # pass 8 # skip 0 # fail 0 # ok

Note that the output talks about PhantomJS. This is because there is full support for Integration tests that run in a browser, and by default, these run headless in the PhantomJS browser. There is full support for running them in other browsers if you wish, and when setting up continuous integration (CI) it is worth doing this to ensure that your application works correctly in all supported browsers.

How an Ember.js app is structured

Before we get to actually writing our application, let's explore how it is structured on the filesystem. The ember new command above will have created a whole directory structure on your computer, with lots of different parts. Understanding all of these is important to efficiently work with the tool and create amazing projects.

Continue reading %Ember.js: The Perfect Framework for Web Applications%

by Graham Cox via SitePoint http://ift.tt/2ylUiSi

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript Branding #Javascript Weekly #Mobile #Mo

0 notes

womensadventuremagazine · 8 years ago

Text

WordPress CMS Verses Craft CMS

Any web developer who has been working in the industry for more than a few days has probably heard of WordPress. Stay for a couple more months and there’s a good chance you’ve worked on a WordPress site– it’s a popular platform since it’s well-known, easy-to-use, and free.

Craft is a small CMS that was developed fairly recently by ExpressionEngine add-on developers Pixel & Tonic. Having worked with ExpressionEngine for a while, it’s obvious these guys really know the pain-points in any client-facing CMS. Everything they’ve built into Craft solves a problem I’ve had on almost every site I ever made with WordPress. If I had to make a CMS myself, it would probably resemble Craft pretty closely.

You may have also heard of ExpressionEngine, Drupal, Joomla, and a few other CMS heavy-hitters. They all have their benefits and flaws, which is a topic for another time. I ‘d rather talk about the next up-and-comer and my new favorite, Craft.

How does Craft stack up against the industry go-to?

The Good

Craft is like WordPress if it was stripped naked and then clothed in Advanced Custom Fields

Craft, on the other hand, starts with just the basic building blocks and minimal defaults. The Sections and Fields it does provide let you build up your content types and inputs to get to the custom dashboard you want. I would even say it takes less time to build Craft up to WordPress status than it does to fight with WordPress settings to take out all of those Blog-centric things you don’t need.

Another win for Craft is that its Fields build your content interface in much the same way as WordPress’s Advanced Custom Fields plugin (a must-have tool with WordPress in my book), but without downloading and installing another piece.

WordPress strives to give its users as much as possible out-of-the-box, whether that user is a novice blogger or a talented developer who needs a good admin panel. The result is often too much functionality, which forces developers to strip out or disable features to meet the needs of your very custom website (like Comments or the Links Manager, pre WordPress 3.5).

Building instead of Manipulating

There is no API to coerce into the markup that you want and there is no lazy settling for the default because there is no default. As the O.C.D., semantic-obsessed front-end developer that I am, this is perfect. I set all my own HTML (with Twig templates in Craft), styles, and attributes from scratch. <3.

One thing that is a recurring pain to work around in WordPress is its lack of relationships between Post Types. If one Post Type needs to be related to another Post Type, you have to make some middle-man taxonomy or category to relate them, do some PHP magic to make your own custom inputs in the post editing screen, or find a plugin that meets your need. With Craft, Entries (the Crafty brother to Posts) are easily related with a simple Field type. Drag, drop, done. Hallelujah!

One other great client-serving feature of Craft is its handy Matrices. With Matrices, you can set up your interface in Blocks, which your client can then use to build their page– it’s a win-win-win for clients, designers, and developers. Clients can control the order of their well-designed content without hacks or careful content input into a catch-all Editor; designers can rest assured that their designs won’t be fouled-up by user error; and developers have complete control over the mark-up which is generated by these blocks.

This difference in the platforms’ philosophies is apparent in their templating tools. WordPress supplies and spits out a lot of its own default HTML that requires manipulation of the API to change. Craft comes with nothing. No HTML at all. Which is glorious.

A Common Example: Say a non-profit site has a Section of “Social Causes” pages and they want all of their News and information to be categorized by and related to these Causes. Creating those relationships is far more difficult in WordPress.

Relationships are Hard.

Welcome to the Matrix.

In comparison, WordPress can do repeating blocks of the same content in a row. Not too bad. The catch is that you need Advanced Custom Fields, plus their Repeater Field addition which, unlike the main plugin, does cost a few bucks.

Less PHP! And More PHP! Wat?

You will find PHP in Craft’s plugins. Since Craft does not have Themes, there really isn’t anywhere to put your common template helpers and useful functions. Instead, be prepared to write your own Plugin to add what you need. Gone are the days of plopping in a random PHP function into functions.php. This is great since your site is then based off of good modular code and proper PHP Classes, but you may need to read up a bit to get there.

This last “Good” point is relative to the type of developer you are, so I admit this could easily go in the “Bad” section. Craft is built off of PHP like WordPress, Craft uses Twig templates. This is great for front-end developers already familiar with other templating languages like Handlebars or Liquid, but may not be for all you PHP gurus. I personally like the change, since loops feel a little less clunky and the data syntax is closer to JavaScript.

How Does It Look?

Caption: Lawbar – Wellington Lawyers

The Bad.

As Apple found out the hard way, it can be tough to beat the big dog in the market. WordPress has been around longer, has more resources, and has more developers actively contributing to it. If you hit an issue with Craft, resources are few. I’m sure the Craft community will catch up, but in the mean time I recommend making a few new Twitter friends. @Craftcms, the folks from Pixel & Tonic themselves, and Viget’s own Trevor Davis are good follows. Those passionate about Craft are happy to answer questions.

Google Maps vs. Apple Maps.

Craft? Crafts? Kraft? Minecraft?

I search “Craft CMS” for the best results and include “Twig” if it’s a templating problem.

Craft picked a pretty tough name in the Googleverse. Searching for common problems becomes a real chore, simply because you have to sort through 50 articles about Minecraft before getting to the few sources that are available. Compare that to WordPress results, which will stretch for pages and probably include at least five well-written solutions to your problem on Stack Overflow.

The Deal-breaker.

One obstacle for some clients when it comes to Craft is the price. One can’t help but second guess the choice to throw down $299 when the usual go-to CMS is FREE. It’s not such a tough sell on the agency level since clients have usually come prepared to spend much larger sums, but freelancers might have a harder time justifying the cost. Even so, I recommend you try– it’s a one-time fee that then unlocks all of Craft’s best features and goes toward the support and further development of the system.

For good reason, Pixel & Tonic have restricted Craft’s Matrix a bit. Some things I would love to see in future releases:.

Can I get both Pills? The Matrix + Inception.

Re-using Blocks: I ‘d like to use already made Fields or sets of Fields inside Matrix blocks. If the same “module” exists both inside and outside of my Matrix, keeping the data the same requires careful duplication.

Matrix Inception: Please?

from WordPress http://ift.tt/2joP14v via IFTTT

#IFTTT #WordPress

0 notes